<!--  -->
<template>
  <el-container>
    <el-main>
      <div class="main">
        <div class="back-bar-box mb-30">
          <div class="btn-back" @click="goBack">
            <i class="el-icon-back"></i> 返回
          </div>
          <div class="line"></div>
          <div class="name">编辑课程分类</div>
        </div>
        <div class="form">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <el-form-item label="父级" prop="region">
              <el-select
                v-model="ruleForm.region"
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in categories"
                  :key="'分类' + item.id"
                  :label="item.name"
                  :value="item.name"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="升序" prop="sort">
              <el-input v-model="ruleForm.sort" type="number"></el-input>
              <p class="tip">
                <i class="el-icon-info"></i>
                请输入整数。小数排在前面，大数排在后面。
              </p>
            </el-form-item>

            <el-form-item label="分类名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="显示" prop="show" class="switch">
              <el-switch v-model="ruleForm.show"> </el-switch>
            </el-form-item>

            <el-form-item>
              <div class="bottom-menus-box">
                <div>
                  <el-button type="primary" @click="submitForm('ruleForm')"
                    >保存</el-button
                  >
                </div>
                <div class="ml-24">
                  <el-button @click="goBack">取消</el-button>
                </div>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { courseCategoryCreate } from "@/network/course";
import { Loading } from "element-ui";
import http from "@/network/http.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      ruleForm: {
        name: "",
        region: "",
        sort: "",
        show: true,
      },
      rules: {
        region: [{ required: false, trigger: "change" }],
        name: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        sort: [{ required: true, message: "请选择活动区域", trigger: "blur" }],
      },
      categories: [],
      id: "",
      mesArr: [],
      parent_id: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.categories.forEach((item) => {
            if (this.ruleForm.region) {
              if (this.ruleForm.region == item.name) {
                 this.parent_id = item.id == 0 ? "" : item.id;
              }
            }
          });
          http
            .put(`/courseCategory/${this.id}`, {
              id: this.id,
              is_show: this.ruleForm.show == true ? 1 : 0,
              name: this.ruleForm.name,
              parent_id: this.parent_id,
              sort: this.ruleForm.sort,
            })
            .then((res) => {
              this.getCourseCategory();
                this.$router.push({
                  path: "/course/vod/category/index"
                })
            });
          this.$message({
            type: "success",
            message: "成功!",
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    goBack: function () {
      this.$router.push({
        path: "/course/vod/category/index",
      });
    },
    getCourseCategory: function () {
      courseCategoryCreate().then((res) => {
        this.categories = res.data.categories;
      });
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCourseCategory();
    this.id = location.href.split("?")[1].split("=")[1];
    http.get(`/courseCategory/${this.id}`).then((res) => {
      this.mesArr = res.data;
      this.categories.forEach((item) => {
        if (this.mesArr.parent_id) {
          if (this.mesArr.parent_id == item.id) {
            this.ruleForm.region = item.name;
          }
        }
      });
      this.ruleForm.sort = this.mesArr.sort;
      this.ruleForm.name = this.mesArr.name;
    });
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang='scss'  scoped>
.el-container {
  height: 100%;
  text-align: center;
}
.el-main {
  background-color: #f1f2f9;
  padding: 20px 5px 20px 20px;
  .main {
    width: 100%;
    height: auto;
    float: left;
    background-color: #fff;
    box-sizing: border-box;
    padding: 30px;
    border-radius: 15px;
    margin-bottom: 90px;
    box-shadow: 0 2px 4px 0 hsl(0deg 0% 40% / 5%);
    min-width: 1180px;
    .back-bar-box {
      display: flex;
      align-items: center;
      width: 100%;
      height: auto;
      float: left;
      margin-bottom: 30px;
      .btn-back {
        font-size: 14px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        i.el-icon-back {
          font-family: element-icons !important;
          //   speak: none;
          font-style: normal;
          font-weight: 400;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
          vertical-align: baseline;
          display: inline-block;
          -webkit-font-smoothing: antialiased;
        }
      }

      .line {
        width: 1px;
        height: 14px;
        background-color: #d8d8d8;
        margin-right: 15px;
        margin-left: 15px;
      }

      .name {
        font-size: 14px;
        font-weight: 600;
        color: #333;
      }
    }
    ::v-deep .form {
      width: 100%;
      height: auto;
      float: left;
      .el-select {
        width: 300px;
      }
      .el-form-item__label {
        width: 200px !important;
      }
      .el-form-item__content {
        margin-left: 200px !important;
        text-align: left;
      }
      .el-input {
        width: 300px;
      }
      .switch .el-form-item__content {
        width: auto;
        text-align: left;
      }
      .tip {
        display: inline-block;
        margin-left: 10px;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.5);
        i {
          margin-right: 2px;
        }
      }
      div.bottom-menus-box {
        position: fixed;
        bottom: 0;
        left: 200px;
        right: 0;
        z-index: 2000;
        box-sizing: border-box;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
        background-color: #fff;
        display: flex;
        box-shadow: 0 -2px 4px 0 hsl(0deg 0% 40% / 5%);
        // div {
        //   el-button {
        //   }
        // }

        div.ml-24 {
          margin-left: 24px;
          //   el-button {
          //   }
        }
      }
    }
  }
}
</style>